<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap_v3.css"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/list.css"/>
    <link rel="stylesheet" type="text/css" href="css/transtion.css"/>
    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/search.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
  
    <title>or列表</title>
    

  
</head>
<style>
    #jiantou_a:checked ~ul{
            display: flex;
            display: -webkit-flex;
    }
    #left_nav{
                display:none;
    }
    #left_nav:checked~.web_nav{
                /* transform: translateX(0%); */
                display: block;
    }
    #right_search{
                display: none;
        }
        #right_search:checked~.search{
                transform: translateX(0%);
    }
</style>
<body onload="load()">
             <!--loading-->
             <div id="loading">
                        <span>L</span>
                        <span>O</span>
                        <span>A</span>
                        <span>D</span>
                        <span>I</span>
                        <span>N</span>
                        <span>G</span>
                </div>
                <!--loading结束标签-->
        <input type="checkbox" id="left_nav">
        <input type="checkbox" id="right_search">
        <div class="web_nav bounceInLeft">
                <div class="nav_box">
                        <label for="left_nav">
                            <img src="images/close.png">
                        </label>
                        <ul class="ui">
                            <li><img src="images/xinlang2.png"></li>
                            <li><img src="images/wechat2.png"></li>
                            <li><img src="images/baidu2.png"></li>
                            <li><img src="images/xiangji2.png"></li>
                        </ul>
                        <ul class="daohang">
                                        <a href="about.html">About Or</a>
                                        <a href="canpin.html">Product</a>
                                        <a href="admin.html">Space Inspiration</a>
                                        <a href="huodong.html">User Experience</a>
                        </ul>
                        <ul class="line_content">
                                <li class="one">news</li>
                                <li class="two">event</li>
                                <li class="three">contact</li>
                        </ul>
                </div>
        </div>
        <div class="search">
                <div class="r_eturn">
                        <label for="right_search">
                            <img src="images/return.png">
                        </label>
                        <span>Return</span>
                </div>
                <input type="text" placeholder="搜索" autofocus>
                <p>Searh anything & hit enter</p>
        </div>
    <div class="web">
                <header>
                                <label for="left_nav" class="left">
                                 
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                  
                                </label>
                                <a href="index.html" class="logo">
                                        <img src="images/logo2_03.jpg">
                                   </a>
                                  <label for="right_search" class="right">
                                        <img src="images/sousuo.png">
                                  </label>  
                </header>
            <div class="content">
                    <div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
                            <!-- Indicators -->
                         
                        
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner img_box" role="listbox">
                                <div class="item active banner_img">
                                        <img src="images/list1_03.jpg" alt="...">
                                        <div class="b_uttom">SEE MORE</div>
                                </div> 
                            </div>
                    </div>
                    <!--box-->
                    <div class="box">
                            <div class="box_A">
                                    <div>
                                            <a href="new.html"><img src="images/list2_07.jpg"></a>
                                            <a href="new.html" class="ppp">>See more</a>
                                    </div>
                                    <div>
                                            <a href="new.html"><img src="images/list3_09.jpg"></a>
                                            <a href="new.html"  class="ppp">>See more</a>
                                    </div>
                                    <div>
                                            <a href="new.html"><img src="images/list4_11.jpg"></a>
                                            <a href="new.html" class="ppp">>See more</a>
                                    </div>
                            </div>
                            <div class="b_box">
                                        <div class="box_B">
                                                <a href="new.html" class="left">
                                                                <img src="images/list5_17.jpg">
                                                </a>
                                                <div class="right">
                                                                <span>Life</span>
                                                                <h3>This Levitating Cloud Doubles 
                                                                        as a Bluetooth Speaker </h3>
                                                                <p>Loose-fitting pieces swathed in a bold palette.</p>
                                                                <a href="new.html" class="sm">SEE MORE</a>
                                                </div>
                                        </div>
                                        <div class="box_B">
                                                <a href="new.html" class="left">
                                                        <img src="images/list6_20.jpg">
                                                </a>
                                                <div class="right">
                                                        <span>Life</span>
                                                        <h3>This Levitating Cloud Doubles 
                                                                as a Bluetooth Speaker </h3>
                                                        <p>Loose-fitting pieces swathed in a bold palette.</p>
                                                        <a href="new.html" class="sm">SEE MORE</a>
                                                </div>
                                        </div>
                                        <div class="box_B">
                                                <a href="new.html" class="left">
                                                        <img src="images/list7_22.jpg">
                                                </a>
                                                <div class="right">
                                                        <span>Life</span>
                                                        <h3>This Levitating Cloud Doubles 
                                                                as a Bluetooth Speaker </h3>
                                                        <p>Loose-fitting pieces swathed in a bold palette.</p>
                                                        <a href="new.html" class="sm">SEE MORE</a>
                                                </div>
                                        </div>
                                       
                        </div>
                        <div class="lm"><span>LOAD MORE</span></div>
                        
                    </div>
                    <div class="bg_img">
                            <img src="images/list8_24.jpg">
                            <footer>
                                    <p>Copyright (c) Nissin Furniture Crafters Co ,Ltd All Rights Reserved</p>
                                    <div>
                                        <input type="checkbox" id="jiantou_a">
                                       
                                                <ul>
                                                    <li><img src="images/xinlang.png"></li>
                                                    <li><img src="images/wechat.png"></li>
                                                    <li><img src="images/baidu.png"></li>
                                                    <li><img src="images/xiangji.png"></li>
                                                </ul>
                                       
                                        <label for="jiantou_a">
                                                 <span><img src="images/jiantou.png"></span>
                                        </label>
                                    </div>
                            </footer>
                    </div>
            </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script>
  
    /*动态改变根元素字体大小*/
    function recalc() {
        var clientWidth = document.documentElement.clientWidth;
        if(!clientWidth) return;
        document.documentElement.style.fontSize = 40 * (clientWidth / 1920) + 'px';
    }
    
    function initRecalc() {
        recalc();
        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
        if(!document.addEventListener) return;
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    }
    initRecalc();
    
     console.log("手机viewportWidth=",document.documentElement.clientWidth);
        //获取viewport宽
        var viewportWidth = document.documentElement.clientWidth;
        console.log(document.documentElement.style.fontSize);

                //loading
                function load(){
      var a= setTimeout("loading.style.transition='opacity 0.3s'",2000)   
      //设置透明度改变的过渡时间为0.3秒
      var b= setTimeout("loading.style.opacity=0",3000)
      //0.5秒后加载动画开始变为透明
      var c= setTimeout("loading.style.display='none'",4000)
      //当透明度为0的时候，隐藏掉它
}
    //logo变小
    var w=$(".content");

    $(w).scroll(function () {

                //$(window).scrollTop()这个方法是当前滚动条滚动的距离

                //$(window).height()获取当前窗体的高度

                //$(document).height()获取当前文档的高度

                //var bot =15; //bot是底部距离的高度
                var logo = document.querySelector(".logo");
                var clientWidth = document.documentElement.clientWidth;
                if(clientWidth<=768){
                        return
                }else if(($(w).scrollTop()) > ($(w).height() - $(w).height())){
                        logo.style.width = 60 + 'px';
                }else{
                        logo.style.width = 150 + 'px';  
                }
   });
    </script>
  
    
</html>